<template>
  <Modal :footer-hide="true" :value="showModal" :width="985" title="新增入库单" @on-cancel="closeModal">
    <Form ref="JForm" :model="formData">
      <FormItem class="custom4-class part-class" label="入库单号" prop="name">
        <div>{{ formData.toStockOrderNo }}</div>
        <!--        <Input v-model="formData.name" placeholder="请输入入库单号"></Input>-->
      </FormItem>
      <FormItem class="custom4-class part-class" label="订单总价" prop="name">
        <div>{{ (formData.amount / 100).toFixed(2) }}</div>
        <!--        <Input v-model="formData.name" placeholder="请输入订单总价"></Input>-->
      </FormItem>
      <FormItem class="custom4-class part-class" label="商品总数" prop="name">
        <div>{{ formData.countAll }}</div>
        <!--        <Input v-model="formData.name" placeholder="请输入商品总数"></Input>-->
      </FormItem>
      <!--      <FormItem class="custom4-class part-class" label="条码检索" prop="name">-->
      <!--        &lt;!&ndash;        <div>{{ formData.countAll }}</div>&ndash;&gt;-->
      <!--        <Input v-model="formData.barcode" placeholder="请输入商品条码" style="width: 118px;"></Input>-->
      <!--        <Button style="width: 52px;" type="primary" @click="getGoods">查</Button>-->
      <!--      </FormItem>-->
      <FormItem>
        <!--      <div class="m-content-table">-->
        <Table :columns="columns" :data="toStockInfoData" :height="328"></Table>
        <!--      </div>-->
      </FormItem>
      <Button style="display: block;margin:auto" type="primary" @click="closeModal">返回</Button>
    </Form>
  </Modal>
</template>

<script>
import {mapActions} from 'vuex'
import {columns} from './js/columns'

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    toStockId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      formData: {
        toStockOrderNo: '',
        amount: 0,
        countAll: 0,
        barcode: ''
      },
      toStockInfoData: [],   // 商品单位数据
      columns: columns(this, true),
    }
  },
  watch: {
    'showModal'(val) {
      if (val) {
        this._getToStock(this.toStockId)
      }
    }
  },
  mounted() {
  },
  methods: {
    // 关闭页面
    closeModal() {
      this.formData = {}
      this.toStockInfoData = []
      this.$emit('closeModal')
    },
    // 获取当前商品数据接口
    async _getToStock(id) {
      const url = '/toStock/' + id
      const res = await this.GET_DATA({
        dataUrl: url,
      })
      if (res) {
        this.$nextTick(() => {
          this.formData = res.data
          this.toStockInfoData = this.formData.toStockInfoList.map(item => {
            return {
              buying: item.buying,
              count: item.count,
              countRetained: item.countRetained,
              goodsExp: item.goodsExp,
              goodsMfd: item.goodsMfd,
              goodsImgUrls: item.goods.goodsImgUrls,
              barcode: item.goods.goodsBarcode,
              goodsName: item.goods.goodsName
            }
          });
        })
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>

<style lang="scss">
.custom3-class {
  width: 33%;
}


.part-class {
  display: inline-block;
}

</style>